<template>
  <div class="h-screen overflow-hidden p-4 fixed inset-0">
    <div class="max-w-8xl mx-auto">
      <!-- 标题区域 -->
      <!-- iframe 容器 -->
      <div class="bg-white rounded-lg shadow-xl overflow-hidden mt-[5vh]">
        <div class="relative w-full h-[90vh]">
          <iframe
            ref="iframeRef"
            src="https://fangq.site/60/"
            class="absolute top-0 left-0 w-full h-full"
            frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
            referrerpolicy="no-referrer"
          ></iframe>
        </div>
      </div>

      <!-- 加载提示 -->
      <div
        v-if="loading"
        class="fixed inset-0 bg-black/50 flex items-center justify-center"
      >
        <div class="text-bsr text-xl">加载中...</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const loading = ref(true);
const iframeRef = ref<HTMLIFrameElement | null>(null);

const handleIframeLoad = () => {
  loading.value = false;
};

onMounted(() => {
  setTimeout(() => {
    loading.value = false;
  }, 1500); // 给予足够的加载时间

  // 仍然保留基础的加载事件监听
  iframeRef.value?.addEventListener("load", handleIframeLoad);
});
onUnmounted(() => {
  iframeRef.value?.removeEventListener("load", handleIframeLoad);
});
</script>

<style scoped>
iframe {
  border: none;
  background: white;
}
</style>
